<template>
	<view class="">
		<view :class="['rungrou', user_run ? 'rungrou_i' : '']">
			<view class="rungroup_message ">
				<view class="rungroup_message_blur"><image :src="runinfo.Logo" mode=""></image></view>
				<view class="rungroup_message_con">
					<view class="rungroup_message_top">
						<!-- 二维码 -->
						<view class="ewm" @tap="toruncard"><i class="icon">&#xe600;</i></view>
						<view class="pic"><image :src="runinfo.Logo" mode="aspectFill" @tap="toruninformation(club_id)"></image></view>
						<view class="rungroup_message_top_r" @tap="toruninformation(club_id)">
							<view class="one">
								{{ runinfo.Title }}
								<image v-if="runinfo.cation" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/group_logo.png" mode=""></image>
							</view>
							<view class="two">
								<view class="two_id">ID：{{ runinfo.IdCode }}</view>
								<view class="two_age">
									团龄：
									<text v-if="runinfo.year">{{ runinfo.year }}年</text>
									<text v-if="runinfo.month">{{ runinfo.month }}个月</text>
									<text v-if="!runinfo.year && !runinfo.month">1个月</text>
								</view>
							</view>
							<view class="three">城市：{{ runinfo.City }}</view>
						</view>
					</view>
					<view class="rungroup_message_bot shenglueh">{{ runinfo.Slogan }}</view>
				</view>
			</view>
			<view class="notice">
				<view class="notice_content">
					<!-- <image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/discover/run_hot.png" mode="widthFix"></image> -->
					<!-- <image class="notice_content_p" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/run_one.png" mode=""></image> -->
					<view class="notice_content_p">
						<image class="notice_content_pic" src="../../static/othertwo/public.png" mode=""></image>
						<view class="notice_content_tip">
							公告
						</view>
					</view>
					<image class="notice_content_gif" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/run_two.gif" mode=""></image>
					<!-- <view class="notice_contant" @tap="tonoticedetail(notice.id)">{{ notice.title }}</view> -->
					<swiper v-if="notice.length > 0" autoplay="true" vertical="true" class="run_swiper" duration="500">
						<swiper-item v-for="(item, index) in notice" @tap="tonoticedetail(item.id)">
							<view class="notice_contant">{{ item.title }}</view>
						</swiper-item>
					</swiper>
					<view class="no_pubilc" v-else>该跑团没有设置跑团公告</view>
				</view>
				<!-- <view class="notice_to"><i class="icon">&#xe637;</i></view> -->
			</view>
			<!-- 成员 -->
			<view class="participant" @click="topeoplelist(club_id)">
				<view class="participant_left">
					<view class="participant_left_img" :style="{ width: peopleWidth }">
						<image v-for="(item, index) in obtainCitys" :src="item.Avatar" mode="" :style="'left:' + 40 * index + 'rpx'"></image>
						<!-- :style="'left:'+(12+ 100 * parent_index)+'upx'" -->
						<image
							v-if="joinpeopleNum > 5"
							src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/member03.png"
							mode=""
							:style="'left:' + 40 * obtainCitys.length + 'rpx'"
						></image>
					</view>
					<span v-if="joinpeopleNum">共有{{ joinpeopleNum }}名成员</span>
					<span v-else class="nomem">暂无跑团成员</span>
				</view>
				<i class="icon">&#xe637;</i>
			</view>

			<!-- 跑团简介 -->
			<view class="run_hom">
				<view class="one" @click="tojianjie">
					<view class="rungrou_tittle">
						<view class="rungrou_tittle_item">跑团简介</view>
						<i class="icon">&#xe637;</i>
					</view>
					<view class="contant " v-if="runinfo.Detail" v-html="runinfo.Detail"></view>
					<view style="font-size: 28upx;color: #999999;" v-else>暂无跑团简介</view>
				</view>
				<view class="two" @click="tosvip(club_id)">
					<view class="pic">
						<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/discover/run_vip.png" mode="widthFix"></image>
						<view class="Membership"><span>会员权益</span></view>
						<view class="lookvip">查看>></view>
					</view>
				</view>
			</view>
			<!-- 跑团活动 -->
			<view class="run_act">
				<view class="rungrou_tittle">
					<view class="rungrou_tittle_item">跑团活动</view>
					<view class="r" v-if="runlist.length" @tap="tomore(club_id)">
						查看更多
						<i class="icon iconmore">&#xe637;</i>
					</view>
				</view>
				<view :class="['haveactive', user_run.Id != club_id ? 'haveactive_i' : '']"><run-list @toactivedetail="toactivedetail" :runlist="runlist"></run-list></view>
			</view>

			<view class="bottom_join" v-if="constitution && user_run.Id != club_id" @click="joinrun">加入跑团</view>
			<!-- 没有章程 -->
			<view class="bottom_join" v-else-if="user_run.Id != club_id" @click="tojoin(club_id)">加入跑团</view>
		</view>
		<uni-popup ref="joingroup" type="center">
			<view class="scroll-Y-Y">
				<view class="contant">
					<view class="title">入会章程</view>
					<scroll-view scroll-y="true" class="scroll-Y contant_contant"><p v-html="constitution"></p></scroll-view>
				</view>
				<view class="error" @click="$refs.joingroup.close()"><i class="icon">&#xe66f;</i></view>
			</view>
			<view class="turejoin" @click="tojoin(club_id)">确定入会</view>
		</uni-popup>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
		<navigation></navigation>
	</view>
</template>

<script>
import runActivity from '../discover/runactivity.vue';
import runList from '@/components/index/runlist.vue';
import uniPopup from '@/components/uni-popupt/uni-popup.vue';
import loading from '@/components/loading/loading.vue';
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: { navigation, loading, runActivity, runList, uniPopup },
	data() {
		return {
			loadflag: true,
			runinfo: {},
			// 控制弹出层
			navList: ['主页', '活动', '相册'],
			userList: [{ src: '' }, { src: '' }, { src: '' }, { src: '' }, { src: '' }],
			change_index: 0,
			runlist: [],
			club_id: '',
			notice: [],
			obtainCitys: [],
			joinpeopleNum: '', //共有多少人参加
			constitution: '', // 入会章程
			year: '',
			month: '',
			vipRank: '',
			user_run: {},
			peopleWidth: '', //跑团人员图片的宽度
			href: ''
		};
	},
	mounted() {
		this.promise();
		this.getDate();
		// this.getvipRank()
	},
	onShow() {
	},
	onLoad(options) {
		this.club_id = options.id;
		this.href = window.location.href;
	},
	methods: {
		promise() {
			Promise.all([this.getrunInfo(),	 this.getrunActiveList(), this.getnotice(), this.getmemberList(), this.getconstitution(),this.getuserinfo()])
				.then(result => {
					 console.log (result);
				})
				.catch(error => {
					 console.log (error);
				});
		},
		// 获取跑团成员列表
	getmemberList() {
			return new Promise((resolve, reject) => {
				var _this = this;
				this.ajax('club/clubUser', {
					data: {
						club_id: this.club_id
					},
					success: function(res) {
						 // console.log (res.msg);
						var list = res.msg.data;
						var newList = [];
						for (var attr in list) {
							newList = newList.concat(list[attr]);
						}
						//  // console.log (_this)
						//  // console.log (newList)
						newList.forEach(e => {
							e.cityName = e.MemberName;
							if (e.Avatar) {
								e.Avatar = e.Avatar.replace('http:', 'https:');
							}
						});
						_this.joinpeopleNum = newList.length;
						_this.obtainCitys = newList.slice(0, 5);
						_this.peopleWidth = _this.obtainCitys.length * 30 + 'px';
						resolve(res);
					}
				});
			});
		},
		getDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			//  // console.log (year,month)
			this.year = year;
			this.month = month;
			// return `${year}-${month}-${day}`;
		},
		// 获取跑团基本信息
		getrunInfo() {
			return new Promise((resolve, reject) => {
				this.ajax('club/clubInfo', {
					data: {
						id: this.club_id
					},
					success: res => {
						if (res.msg.Logo) {
							res.msg.Logo = res.msg.Logo.replace('http:', 'https:');
						}
						var reg = RegExp('/?x-oss-process=image/');
						if (!reg.test(res.msg.Logo)) {
							uni.getImageInfo({
								src: res.msg.Logo,
								success: function(image) {
									if (image.width > image.height) {
										res.msg.Logo = res.msg.Logo + '?x-oss-process=image/rotate,0';
									}
								}
							});
						}
						 // console.log (res);
						if (res.msg.CreateTime) {
							var y = Number(res.msg.CreateTime.split(' ')[0].split('-')[0]);
							var m = Number(res.msg.CreateTime.split(' ')[0].split('-')[1]);
						}
						var Ny = Number(this.year);
						var Nm = Number(this.month);
						//  // console.log (this.year);
						//  // console.log (this.month);
						if (Ny == y) {
							res.msg.year = 0;
							res.msg.month = Nm - m;
						} else if (Ny > y) {
							if (Nm < m) {
								res.msg.year = Ny - y - 1;
								res.msg.month = 12 + Nm - m;
							} else if (Nm > m) {
								res.msg.year = Ny - y;
								res.msg.month = Nm - m;
							}
						}
						if(res.msg.detail) {
							res.msg.Detail = res.msg.Detail.replace('<img', '<img style="max-width:100%;margin-top:20px"');
						}
						this.runinfo = res.msg;
					}
				});
			});
		},
		// 获取跑团公告
		getnotice() {
			return new Promise((resolve, reject) => {
				this.ajax('club/clubNotice', {
					data: {
						club_id: this.club_id
					},
					success: res => {
						//  // console.log (res);
						this.notice = res.msg.data;
						resolve(res);
					}
				});
			});
		},
		// 获取跑团入会章程
		getconstitution() {
			return new Promise((resolve, reject) => {
				this.ajax('club/clubSetting', {
					data: {
						club_id: this.club_id
					},
					success: res => {
						//  // console.log (res)
						this.constitution = res.msg.rules;
					}
				});
			});
		},
		// 获取会员信息
		getuserinfo() {
			return new Promise((resolve, reject) => { 
				this.ajax('user/userInfo', {
					success: res => {
						 // console.log (res);
						this.user_run = res.msg.club_info;
						this.loadflag = false;
					}
				});
			})
		
		},
	
		// 获取跑团活动列表
		getrunActiveList() {
			return new Promise((resolve, reject) => {
				this.ajax('club/clubActive', {
					data: {
						club_id: this.club_id
					},
					success: res => {
						//  // console.log (res);
						var list = res.msg.data;
						const nowTime = new Date().getTime();
						list.forEach(e => {
							e.startActive = e.start_time.split(' ')[0];
							// 报名开始时时间戳
							e.sign_up_start = e.sign_up_start.replace(/-/g, '/');
							var sing_start = new Date(e.sign_up_start).getTime();
							// 报名结束时间
							e.sign_up_end = e.sign_up_end.replace(/-/g, '/');
							var sing_end = new Date(e.sign_up_end).getTime();
							// 活动开始时间
							e.start_time = e.start_time.replace(/-/g, '/');
							var start_time = new Date(e.start_time).getTime();
							// 活动结束时间
							e.end_time = e.end_time.replace(/-/g, '/');
							var end_time = new Date(e.end_time).getTime();
							if (nowTime < sing_start) {
								e.state = 2;
							} else if (nowTime > sing_start && nowTime < sing_end) {
								e.state = 0;
							} else if (nowTime > start_time && nowTime < end_time) {
								e.state = 4;
							} else if (nowTime > end_time) {
								e.state = 3;
							} else {
								e.state = 1;
							}
						});
						this.runlist = res.msg.data.slice(0, 3);
						//  // console.log (this.runlist);
						resolve(res);
					}
				});
			});
		},
		// 活动详情
		toactivedetail(key) {
			uni.navigateTo({
				url: '/pageA/competiondetail/competitiondetail?id=' + key
			});
		},
		tomore(key) {
			if (this.runlist.length <= 0) {
				return false;
			}
			uni.navigateTo({
				url: '/pageB/run/moreactive?id=' + key
			});
		},
		// 查看跑团简介
		tojianjie() {
			if( !this.runinfo.Detail) {
				return false
			}
			uni.navigateTo({
				url: '/pageB/discover/gameintroduction?content=' + this.runinfo.Detail
			});
		},
		// 到公告详情
		tonoticedetail(key) {
			uni.navigateTo({
				url: '/pageB/run/noticedetail?id=' + key
			});
		},
		// 查看跑团权益
		tosvip(key) {
			uni.navigateTo({
				url: '/pageB/discover/viprights?id=' + key + '&runtitle=' + this.runinfo.Title
			});
		},
		// 加入跑团
		joinrun() {
			if (this.user_run.Id && this.user_run.Checked) {
				uni.showModal({
					title: '提示',
					content: '您已加入跑团，请退出重新加入',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							 // console.log ('用户点击确定');
						} else if (res.cancel) {
							 // console.log ('用户点击取消');
						}
					}
				});
				return false;
			}
			this.$refs.joingroup.open();
		},
		tojoin(key) {
			 // console.log (this.user_run)
			if (this.user_run.Id && this.user_run.Checked) {
				uni.showModal({
					title: '提示',
					content: '您已加入其他跑团，请退出重新加入',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							 // console.log ('用户点击确定');
						} else if (res.cancel) {
							 // console.log ('用户点击取消');
						}
					}
				});
				return false;
			}
			uni.navigateTo({
				url: '/pageB/run/joinrun?id=' + key
			});
		},
		tophoto() {
			uni.navigateTo({
				url: '/pageA/competiondetail/photo'
			});
		},
		tophotodetail() {
			uni.navigateTo({
				url: '/pageA/competiondetail/photodetail'
			});
		},
		// 切换活动相册
		changenav(e) {
			//  // console.log (e);
			this.change_index = e;
		},
		// 去往跑团成员列表
		topeoplelist(club_id) {
			if (!this.joinpeopleNum) {
				this.toast('暂无跑团成员');
				return false;
			}
			uni.navigateTo({
				url: '/pageB/run/viplist?id=' + club_id
			});
		},
		// 去往跑团信息页
		toruninformation(key) {
			uni.navigateTo({
				url: '/pageB/run/runinformation?id=' + key
			});
		},
		// 二维码名片
		toruncard() {
			uni.navigateTo({
				url: '/pageB/run/runcard?clubid=' + this.club_id
			});
		}
	}
};
</script>

<style lang="less" scoped>
@import url('../../static/less/pageB/run/rungroup.less');
</style>
<style>
page {
	background-color: #ffffff;
}
</style>
